<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Math Game</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div ng-app="app">
	<form ng-controller="GameCtrl" name="mathGameForm" class="game" ng-submit="checkAnswer()">
		<h1 class="text-center">!! Math Game !!</h1>
		<p ng-show="playingGame() || noGame()">See how many math problems you can answer correctly in one minute!</p>
		<p ng-class="{'alert-success': timer < 20, 'alert-warning': timer >= 20 && timer < 40, 'alert-danger': timer >= 40 && timer < 60 }" ng-show="playingGame()" class="alert h4 timer" role="alert">{{timer}}</p>	
		<p class="form-group" ng-class="{'has-error': isIncorrect(), 'has-success': isAnswer() }" ng-show="playingGame()">
			<label class="control-label center-block text-center h2">{{variables.x}} {{symbol}} {{variables.y}}</label>
			<input type="text" class="form-control" ng-model="answer" placeholder="Answer" />
		</p>
		<p class="h3" ng-show="endGame()">
			Time is up!</p>
		<p ng-show="endGame()">
			You answered {{correct}} out of {{correct+wrong}} correctly with an accuracy rating of {{accuracy() | number }}%
		</p>
		<div class="progress" ng-show="playingGame() || endGame()">
  		<div class="progress-bar" ng-class="{'progress-bar-success': accuracy() >= 75, 'progress-bar-warning': accuracy() >= 50 && accuracy() < 75, 'progress-bar-danger': accuracy() < 50}" role="progressbar" aria-valuenow="accuracy()" aria-valuemin="0" aria-valuemax="100" style="width: {{accuracy()}}%">
    <span>{{correct}} / {{wrong+correct}}</span>
  </div>
</div>
			<p class="text-center" ng-show="noGame() || endGame()">
			 <button type="button" ng-click="startGame()" class="btn btn-primary btn-lg"><span ng-show="noGame()">Start</span><span ng-show="endGame()">New</span> Game</button>
		</p>
	</form>
</div>
<!-- partial -->
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script><script  src="./script.js"></script>

</body>
</html>
